<template>
  <div>
    <dialog-info :visible-p.sync="dialogInfoVisible" :details-p="details"></dialog-info>
    <dialog-contract :visible-p.sync="dialogTransferVisible" :details-p="detailsContract"></dialog-contract>
    <!--校验手机号-->
    <dialog-check-phone :visible-p.sync="dialogCheckPhone" :details-p="checkDetail"></dialog-check-phone>
    <!-- <dialog-confirm :visible-p.sync="dialogConfirm" :details-p="checkDetail"></dialog-confirm> -->
    <section>
    <el-table :data="comDatas" v-loading.fullscreen="dataLoading"  element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)" border  :summary-method="sumHandle([5,6])" sum-text="本页合计" style="width: 100%" :row-class-name="tableRowClassName"
      @expand-change="expendhandle" @mousedown.native="mouseDown">
      <el-table-column align="center" fixed type="index" label="No." width="50">
      </el-table-column>
      <el-table-column align="center" fixed  label="AR单号" prop="masterChainId" width="130" :formatter="nullDealWith">
      </el-table-column>
      <el-table-column align="center" label="结报单号" prop="billId" :formatter="nullDealWith">
      </el-table-column>
      <el-table-column align="center" label="贴现客户" prop="custFromName" :formatter="nullDealWith">
      </el-table-column>
      <el-table-column align="center" label="币别" prop="currencyDesc" width="80" :formatter="nullDealWith">
      </el-table-column>
      <el-table-column align="right" header-align="center" label="贴现金额" prop="billBookAmt" width="120" :formatter="regexNum">
      </el-table-column>
      <el-table-column align="right" header-align="center" label="实放金额" prop="discountAmt" width="120" :formatter="regexNum">
      </el-table-column>
      <el-table-column align="center" label="票据到期日" prop="billPayDate" min-width="100" :formatter="dateFormat">
      </el-table-column>
      <el-table-column align="center" label="信用报告">
        <template slot-scope="scope">
          <a :href="scope.row.riskPlatFormURL | addHerf" target="_blank">信用报告</a>
        </template>
      </el-table-column>
      <el-table-column align="center" label="贴现状态" prop="arStatusTypeName">
      </el-table-column>
      <el-table-column align="center" label="结报状态" min-width="100">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="light" placement="top-start">
                <div slot="content" class="status-tooltip">
                  <ul>
                    <li :style="scope.row.signStatusId===0?'color:red':''">会计确认</li><span>-></span>
                    <li :style="scope.row.signStatusId===1?'color:red':''">财务确认</li><span>-></span>
                    <li :style="scope.row.signStatusId===2?'color:red':''">财务已付款</li><span>-></span>
                    <li :style="scope.row.signStatusId===3?'color:red':''">付款单确认</li>
                  </ul>
                  <ul>
                    <li :style="scope.row.signStatusId===0?'color:red':''">{{scope.row.signStatusId===0&&scope.row.signStatusName?`(${scope.row.signStatusName})`: ''}}</li>
                    <li :style="scope.row.signStatusId===1?'color:red':''">{{scope.row.signStatusId===1&&scope.row.signStatusName?`(${scope.row.signStatusName})`: ''}}</li>
                    <li :style="scope.row.signStatusId===2?'color:red':''">{{scope.row.signStatusId===2&&scope.row.signStatusName?`(${scope.row.signStatusName})`: ''}}</li>
                    <li :style="scope.row.signStatusId===3?'color:red':''">{{scope.row.signStatusId===3&&scope.row.signStatusName?`(${scope.row.signStatusName})`: ''}}</li>
                  </ul>
                </div>
                  <em>{{scope.row.billPayStatus}}</em>
            </el-tooltip>
            <!-- <el-tooltip class="item" effect="dark" content="会计确认->财务确认->财务已付款->付款单确认" placement="top">
              <span>{{scope.row.billPayStatus}}</span>
            </el-tooltip> -->
          </template>
      </el-table-column>
      <el-table-column align="left" header-align="center" label="操作" width='125px' fixed="right" :resizable="false">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleInfo(scope.$index, scope.row)">详情</el-button>
          <el-button size="mini" type="text" v-for="(item, index) in scope.row.operateArr" :key="index" @click="handleCommand({key:item.key, idx:index, val:scope.row})" >{{item.name}}</el-button>
          <!-- <el-dropdown :hide-on-click="false" v-if="scope.row.operateArr.length!==0">
            <span class="el-dropdown-link">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item, index) in scope.row.operateArr" :key="index" ><el-button class="full-width" type="primary" @click="handleCommand({key:item.key, idx:index, val:scope.row})" >{{item.name}}</el-button></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
        </template>
      </el-table-column>
    </el-table>
  </section>
  </div>
</template>
<style lang="scss" scoped>
@import "@/assets/css/_dialog.scss";
</style>

<script>
import ListMinxIn from '@/mixins/suplier/Ar/Table'
import Common from '@/mixins/common/common' // getLoanDetail 刷新数据fresh函数
import Dialog from '@/mixins/suplier/Ar/Dialog'
import DialogClose from '@/mixins/suplier/Ar/DialogClose' // handleInfo
import { firstToUpperCase, debounce, erroShow, postMsgBase } from '@/util/util' // 首字母大写 防抖函数
import { loadingConf } from '@/config/common' // 获取加载配置
import { apiUrl, YZTUrl } from '@/config/env.js'
export default {
  name: 'loan', // 放款列表页面
  props: ['dataLoading', 'dataTable'],
  data () {
    return {
      dialogCheckPhone: false, // 校验手机弹窗
      dialogConfirm: false,
      checkDetail: {}, // 校验详情
      detailsContract: '',
      vendorCode: '',
      operateArr: [{ key: 'contrac', name: '合同生成' }, { key: 'confirm', name: '发起确认' }, { key: 'accept', name: '放款' }, { key: 'reject', name: '拒绝' }] // 操作数据
    }
  },
  mixins: [ListMinxIn, Common, Dialog, DialogClose],
  components: {
    'dialog-info': () =>
      import(/* webpackChunkName: 'Dialog' */ '@/components/Fund/Work/Loan/DialogInfoLoan'),
    'dialog-contract': () =>
      import(/* webpackChunkName: 'Dialog' */ '@/components/Fund/Work/Loan/DialogLoanContract'),
    'dialog-check-phone': () =>
      import(/* webpackChunkName: 'Dialog' */ '@/components/Fund/Work/Loan/DialogCheckPhone')
  },
  computed: {
    comDatas: function () {
      const datas = this.getOpera(this.dataTable)
      return datas
    }
  },
  filters: {
    addHerf (val) {
      return apiUrl + val
    }
  },
  methods: {
    // 更多事件
    handleCommand (obj) {
      console.log(firstToUpperCase(obj.key))
      let key = `handle${firstToUpperCase(obj.key)}` // 方法为handle+ key首字母大写化组成
      this[key](obj.idx, obj.val)
    },
    // 详情
    handleInfo: debounce(handleInfo, 1000, true),
    // 合同生成
    handleContrac: debounce(handleContrac, 1000, true),
    // 发起确认
    handleConfirm: handleConfirm,
    // 放款
    handleAccept: handleAccept,
    // 拒绝
    handleReject: handleReject,
    // 按钮菜单显隐处理
    getOpera: getOpera,
    // 调用一账通的
    getOneCommom () {
      this.axios.post(YZTUrl + '/rest/track/channelTrack', {
        channel: 'JX',
        trackType: 'BLFK',
        vendorCode: this.vendorCode
      }, {headers: {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json'
      }
      }).then(res => {
        if (res.data.status) {
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 调用微信方法发送消息
    sendTradeMessage (transSerialNo) {
      this.axios.post('/wechat/juxin/sendJuXinTransactionMessage', {
        transSerialNo: transSerialNo,
        loanType: 3,
        operateTypeIndex: 9
      }).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
// 详情函数
function handleInfo (idx, val) {
  // 引入mixins/common.js中getLoanDetail其中包含有加载loading
  this.getLoanDetail('/loan2/queryLoanInfo.do', { masterChainId: val.masterChainId }).then(res => {
    if (res) {
      this.details = res
      this.dialogInfoVisible = true
    }
  })
}
// 合同生成
function handleContrac (idx, val) {
  // 1.显示加载图标
  const loading = this.$loading(loadingConf.get())
  // 2.获取数据
  this.axios.post('/loan2/showGenerateContract.do', { masterChainId: val.masterChainId }).then(res => {
    console.log(res)
    if (res.data.status) {
      // 放款比例初始化否则先输入实际放款金额会造成不联动
      res.data.data.loanPer = res.data.data.loanPer || 80
      res.data.data.actualDiscountAmt = res.data.data.actualDiscountAmt || ((parseInt(res.data.data.billBookAmt * 100) * parseInt(res.data.data.loanPer * 100)) / 1000000).toFixed(2)
      res.data.data.repaymentType = res.data.data.repaymentType ? parseInt(res.data.data.repaymentType) : null
      // 3.设置数据
      this.detailsContract = res.data.data
      // 4.显示弹窗
      this.dialogTransferVisible = true
    } else {
      this.$message.error(res.data.msg)
    }
    loading.close() // 关闭加载图标
  }).catch((err) => {
    // 错误提示
    erroShow.call(this, err, loading)
  })
}
// 发起确认
function handleConfirm (idx, val) {
  var _this = this
  console.log(new Date(val.billPayDate))
  if (val.repayDate === undefined || val.repayDate === null || val.repayDate === '') {
    this.$alert(`请先生成合同再进行合同确认!`, '系统提示', {
      confirmButtonText: '确定',
      callback: action => {
      }
    })
    return
  } else if (new Date(val.repayDate) <= new Date()) {
    this.$alert(`抱歉，还款日期已过，无法进行此操作，请重新确认`, '系统提示', {
      confirmButtonText: '确定',
      callback: action => {
      }
    })
    return
  }
  this.$confirm(`单号为${val.masterChainId}的贴现合同确认发起?`, `提示`, {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    center: true
  }).then(() => {
    this.checkDetail = val
    this.axios.post('/commonCust/queryCorpRequest', {}).then(res => {
      if (res.data.status) {
        this.dialogCheckPhone = true
        _this.checkDetail = Object.assign({}, _this.checkDetail, {phone: res.data.data})
      } else {
        // this.handleClose() // 关闭弹窗
        this.$alert(`<p>${res.data.msg}</p>`, '系统提示', {
          dangerouslyUseHTMLString: true
        })
      }
    }).catch(err => {
      console.log(err)
    })
  }).catch(() => {
    this.$message({
      type: 'info',
      message: '操作已取消'
    })
  })
}
// 放款
function handleAccept (idx, val) {
  if (val.billPayDate === undefined || val.billPayDate === null || val.billPayDate === '') {
    this.$alert(`预计回款日期不存在，无法进行此操作`, '系统提示', {
      confirmButtonText: '确定',
      callback: action => {
      }
    })
    return
  } else if (new Date(val.billPayDate) <= new Date()) {
    this.$alert(`抱歉，还款日期已过，无法进行此操作，请取消或拒绝该单`, '系统提示', {
      confirmButtonText: '确定',
      callback: action => {
      }
    })
    return
  }
  // 获取供应商代码
  this.axios.post('/commonCust/queryCustomer.do', {
    custId: val.custFromId,
    companyName: ''
  }).then(res => {
    if (res.data.status) {
      this.vendorCode = res.data.data.vendorCode
    }
  }).catch(err => {
    console.log(err)
  })
  this.$confirm(`单号为${val.masterChainId}的贴现申请确认放款?`, `提示`, {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    center: true
  }).then(() => {
    postMsgBase.call(this, '/loan2/completeLoan.do', {masterChainId: val.masterChainId}, true).then(res => {
      // 操作成功关闭弹窗刷新数据
      if (res.data.status) {
        this.$message({
          type: 'success',
          message: res.data.msg
        })
        this.handleClose() // 关闭弹窗
        this.fresh() // 刷新数据
        this.getOneCommom() // 调用一账通的方法
        this.sendTradeMessage(res.data.data) // 调用微信的方法
      } else {
        this.$message({
          type: 'error',
          message: res.data.msg
        })
      }
    })
    // this.postWithId('/loan2/completeLoan.do', val.masterChainId) // 调用common混合中公共方法
  }).catch(() => {
    this.$message({
      type: 'info',
      message: '操作已取消'
    })
  })
}
// 拒绝
function handleReject (idx, val) {
  this.$confirm(`单号为${val.masterChainId}的贴现申请确认拒绝?`, `提示`, {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    center: true
  }).then(() => {
    this.postWithId('/loan2/rejectLoan.do', val.masterChainId) // 调用common混合中公共方法
  }).catch(() => {
    this.$message({
      type: 'info',
      message: '操作已取消'
    })
  })
}
/* 按钮菜单显隐处理
    ** val 节点数据
    ** ischild 是否是子数据
    */
function getOpera (val) {
  const datas = val
  datas.forEach((item) => {
    const operateArr = []
    switch (item.checkedStatus) {
      case 22:
        operateArr.push(this.operateArr[0])
        operateArr.push(this.operateArr[1])
        break
      case 24:
        operateArr.push(this.operateArr[2])
        break
      default:
        break
    }
    operateArr.push(this.operateArr[3])
    item.operateArr = operateArr
  })
  console.log(datas)
  return datas
}
</script>
<style lang="scss">
.demo-table-expand label {
  width: 100px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
/* 更多菜单样式 */
.el-dropdown {
  margin-left: 20px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #033c81;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-dropdown-menu.el-popper {
  li:not(:first-of-type) {
    margin-top: 10px;
  }
  .full-width {
    width: 100%;
  }
}
</style>
